<template>
  <!-- 头部 -->
  <div class="expend_icon" style="font-size: 20px">
    <!-- <el-icon :size="19" @click="collaspe" v-if="isCollapse">
      <Fold />
    </el-icon>
    <el-icon :size="19" @click="collaspe" v-if="!isCollapse">
      <Expand />
    </el-icon> -->
    <el-icon>
      <component :is="collapseBtnClass" @click="collapse"></component>
    </el-icon>
    <!-- 表头 -页签 -->
    <el-breadcrumb separator="/" class="ml-5">
      <el-breadcrumb-item :to="'/'">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{ currentPathName }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <div class="toolbar">
    <!-- 切换夜间模式 -->
    <swich-model class="mr-10"></swich-model>
    <el-avatar
      icon="UserFilled"
      :size="26"
      :src="users.avatarUrl"
      class="mr-10"
    />
    <el-dropdown>
      <span
        >{{ users.nickname }}<el-icon><ArrowDownBold /></el-icon
      ></span>

      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <router-link to="/person">个人信息</router-link>
          </el-dropdown-item>
          <el-dropdown-item @click="logout"> 退出 </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>


<script>
import SwichModel from '../Switch/SwichModel.vue'
export default {
  name: 'common-header',
  data() {
    return {
      // 本地存储中获取数据
      //三元表达式 若获取得到本地user数据，则返回当前数据，否则返回空｛｝
      //JSON.parse 字符串->对象
      // user: localStorage.getItem('user')
      //   ? JSON.parse(localStorage.getItem('user'))
      //   : {}
    }
  },

  created() {
    console.log(this.users)
  },
  props: {
    collapseBtnClass: {
      type: String,
      default: 'Expand'
    },

    //伸缩图案
    collapse: Function, //函数类型
    //user
    users: Object
  },

  methods: {
    logout() {
      this.$store.commit('logout')
      // this.$router.push('/login')
      // localStorage.removeItem('user')
      this.$message.success('退出成功')
      // window.addEventListener('beforeunload', function (event) {
      //   localStorage.clear()
      // })
    }
  },

  computed: {
    currentPathName() {
      return this.$store.state.currentPathName //需要监听的数据
    }
  },
  watch: {
    //监听路由变化
    currentPathName(newVal, oldVal) {
      console.log(newVal, oldVal)
    }
  },

  components: { SwichModel }
}
</script>

<style lang="less" scoped>
.el-header {
  display: flex;
  justify-content: space-between;
  // border-bottom: 1px solid #000;
  // background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
  .toolbar,
  .expend_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .expend_icon {
    padding-left: 10px;
  }
}
</style>

